<nb-card>
  <nb-card-header>
    Prime Table
  </nb-card-header>
  <nb-card-body>
    <p-table [value]="primeList" [rowHover]="true" [loading]="loading" [rows]="5" [paginator]="true">
      <ng-template pTemplate="caption">
        <div class="table-header">
          List of Customers
          <span class="p-input-icon-left">
              <i class="pi pi-search"></i>
              <input pInputText type="text" placeholder="Global Search" />
          </span>
        </div>
      </ng-template>
      <ng-template pTemplate="header">
        <tr>
          <th style="width: 3rem;">
            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
          </th>
          <th pSortableColumn="name">
            <div class="p-d-flex p-jc-between p-ai-center">
              Name
              <p-sortIcon field="name"></p-sortIcon>
              <p-columnFilter type="text" field="name" display="menu" class="p-ml-auto"></p-columnFilter>
            </div>
          </th>
          <th pSortableColumn="country">
            <div class="p-d-flex p-jc-between p-ai-center">
              Country
              <p-sortIcon field="country"></p-sortIcon>
              <p-columnFilter type="text" field="country" display="menu" class="p-ml-auto"></p-columnFilter>
            </div>
          </th>
          <th pSortableColumn="agent">
            <div class="p-d-flex p-jc-between p-ai-center">
              Agent
              <p-sortIcon field="agent"></p-sortIcon>
              <p-columnFilter type="text" field="agent" display="menu" class="p-ml-auto"></p-columnFilter>
            </div>
          </th>
          <th pSortableColumn="date">
            <div class="p-d-flex p-jc-between p-ai-center">
              Date
              <p-sortIcon field="date"></p-sortIcon>
              <p-columnFilter type="text" field="date" display="menu" class="p-ml-auto"></p-columnFilter>
            </div>
          </th>
          <th pSortableColumn="balance">
            <div class="p-d-flex p-jc-between p-ai-center">
              Balance
              <p-sortIcon field="balance"></p-sortIcon>
              <p-columnFilter type="text" field="balance" display="menu" class="p-ml-auto"></p-columnFilter>
            </div>
          </th>
          <th pSortableColumn="status">
            <div class="p-d-flex p-jc-between p-ai-center">
              Status
              <p-sortIcon field="status"></p-sortIcon>
              <p-columnFilter type="text" field="status" display="menu" class="p-ml-auto"></p-columnFilter>
            </div>
          </th>
          <th pSortableColumn="activity">
            <div class="p-d-flex p-jc-between p-ai-center">
              Activity
              <p-sortIcon field="activity"></p-sortIcon>
              <p-columnFilter type="text" field="activity" display="menu" class="p-ml-auto"></p-columnFilter>
            </div>
          </th>
          <th style="width: 4rem;"></th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-item>
        <tr class="p-selectable-row">
          <td>
            <p-tableCheckbox [value]="item"></p-tableCheckbox>
          </td>
          <td>{{item.name}}</td>
          <td>{{item.country}}</td>
          <td>{{item.agent}}</td>
          <td>{{item.date}}</td>
          <td>{{item.balance}}</td>
          <td>{{item.status}}</td>
          <td>{{item.activity}}</td>
          <td style="text-align: center;">
            <button pButton type="button" class="p-button-secondary" icon="pi pi-cog"></button>
          </td>
        </tr>
      </ng-template>
    </p-table>
  </nb-card-body>
</nb-card>
